<template>
	<view>
		<!-- 模糊背景 -->
		<view class="topic-bg"><image :src="item.titlepic" mode="aspectFill" lazy-load></image></view>
		<!-- 话题信息 -->
		<view class="topic-info">
			<view class="topic-info-t uflex-a-j_fsc">
				<image :src="item.titlepic" mode="widthFix" lazy-load></image>
				<view class="title">
					#
					<text>{{ item.title }}</text>
					#
				</view>
			</view>
			<view class="topic-info-c uflex-a-j_fsc">
				<view>
					动态
					<text>{{ item.totalnum }}</text>
				</view>
				<view>
					今日
					<text>{{ item.todaynum }}</text>
				</view>
			</view>
			<view class="topic-info-b">{{ item.desc }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item: Object
		}
	}
</script>

<style scoped lang="scss">
.topic-bg {
	width: 100%;
	height: 300upx;
	position: relative;
	overflow: hidden;
	> image {
		width: 100%;
		position: absolute;
		filter: blur(10upx);
	}
}
.topic-info {
	padding: 0 25upx;
	width: 100%;
	box-sizing: border-box;
	> .topic-info-t {
		position: relative;
		height: auto;
		width: 100%;
		> image {
			width: 150upx;
			height: 150upx;
			border-radius: 20upx;
			position: absolute;
			top: -75upx;
		}
		.title {
			margin-left: 170upx;
			font-size: 35upx;
			flex: 1;
		}
	}
	> .topic-info-c {
		padding: 30upx 0 10upx 0;
		> view {
			color: #cdcdcd;
			margin-right: 20upx;
			> text {
				margin-left: 10upx;
			}
		}
	}
	> .topic-info-b {
		color: #a3a3a3;
		font-size: 32upx;
		padding-bottom: 10upx;
	}
}
</style>
